<template>
	<view style="background-color:#FFF;height: 100vh;">
		<view class="indextabs">
			<fui-tabs :tabs="tabs" :current="tabIndex" @change="navTabChange" selectedColor="#000" :short="false"
				background="none" />
			<view style="width:300rpx"></view>
		</view>
		<view class="indexbody">
			<view class="" v-for="(item,index) in tabs" :key="index">
				<!-- 达人 -->
				<view class="navPage" v-show="tabIndex==index&&tabIndex==0">
					<view class="subTabsBox">
						<fui-tabs :tabs="item.subTabs" :current="subTabIndex" @change="tabChange" selectedColor="#000"
							:short="false" background="none" />
					</view>
					<view class="subTabsPage">
						<swiper :current="subTabIndex" :duration="300" @change="tabChange" class="swiper">
							<swiper-item class="fui-swiper__item" v-for="(res,inx) in item.subTabs" :key="inx">
								<scroll-view scroll-y style="background-color: #F9F9F9;" :show-scrollbar="false"
									class="swiper">
									<TalentList></TalentList>
								</scroll-view>

							</swiper-item>
						</swiper>
					</view>
				</view>
				<!-- 动态 -->
				<view class="navPage" v-show="tabIndex==index&&tabIndex==1">
					<view class="subTabsBox">
						<fui-tabs :tabs="item.subTabs" :current="subTabIndex" @change="tabChange" selectedColor="#000"
							:short="false" background="none" />
					</view>
					<view class="subTabsPage">
						<swiper :current="subTabIndex" :duration="300" @change="tabChange" class="swiper">
							<swiper-item class="fui-swiper__item" v-for="(res,inx) in item.subTabs" :key="inx">
								<scroll-view scroll-y :show-scrollbar="false" class="swiper">
									<DynamicList :list="dynamicList"></DynamicList>
								</scroll-view>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<!-- 分享 -->
				<view class="navPage" v-show="tabIndex==index&&tabIndex==2">
					<view class="subTabsBox">
						<fui-tabs :tabs="item.subTabs" :current="subTabIndex" @change="tabChange" selectedColor="#000"
							:short="false" background="none" />
					</view>
					<view class="subTabsPage">
						<swiper :current="subTabIndex" :duration="300" @change="tabChange" class="swiper">
							<!-- 商品 -->
							<swiper-item class="fui-swiper__item">
								<scroll-view scroll-y :show-scrollbar="false" class="swiper"
									style="background-color: #F9F9F9;">
									<GoodsList></GoodsList>
								</scroll-view>
							</swiper-item>
							<!-- 招聘 -->
							<swiper-item class="fui-swiper__item">
								<scroll-view scroll-y :show-scrollbar="false" style="background-color: #F9F9F9;"
									class="swiper">
									<RecruitList></RecruitList>
								</scroll-view>
							</swiper-item>
							<!-- 任务 -->
							<swiper-item class="fui-swiper__item">
								<scroll-view scroll-y style="background-color: #F9F9F9;" :show-scrollbar=" false"
									class="swiper">
									<TaskList></TaskList>
								</scroll-view>
							</swiper-item>
							<!-- 活动 -->
							<swiper-item class="fui-swiper__item">
								<scroll-view scroll-y style="background-color: #F9F9F9;" :show-scrollbar="false"
									class="swiper">
									<ActivityList></ActivityList>
								</scroll-view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>



		</view>
	</view>
</template>

<script>
	import TalentList from '@/usersPages/compoents/TalentList.vue'
	import DynamicList from '@/publicPages/dynamic/list.vue'
	import GoodsList from '@/publicPages/goods/list.vue'
	import RecruitList from '@/publicPages/recruit/list.vue'
	import TaskList from '@/publicPages/task/list.vue'
	import ActivityList from '@/publicPages/activity/list.vue'
	export default {
		components: {
			ActivityList,
			TalentList,
			DynamicList,
			GoodsList,
			RecruitList,
			TaskList
		},
		data() {
			return {
				dynamicList: [],
				tabs: [{
					name: "达人",
					id: 1,
					subTabs: [{
							name: "同城",
							id: 1,
						},
						{
							name: "附近",
							id: 2,
						}
					]
				}, {
					name: "动态",
					id: 2,
					subTabs: [{
							name: "同城",
							id: 1,
						},
						{
							name: "附近",
							id: 2,
						}
					]
				}, {
					name: "分享",
					id: 3,
					subTabs: [{
							name: "商品",
							id: 1,
						},
						{
							name: "招聘",
							id: 2,
						},
						{
							name: "任务",
							id: 3,
						},
						{
							name: "活动",
							id: 4,
						}
					]
				}],
				tabIndex: 0,
				subTabIndex: 0,
			};
		},
		onShow() {
			uni.setTabBarStyle({
				backgroundColor: '#FFF', // 需要设置的背景颜色值
				success: function() {
					console.log('TabBar backgroundColor changed successfully');
				},
				fail: function(err) {
					console.error('Failed to change TabBar backgroundColor:', err);
				}
			});
		},
		methods: {
			navTabChange(e) {
				let index = e.index
				if (this.tabIndex === index) return;
				this.tabIndex = index;
				this.subTabIndex = 0
			},
			tabChange(e) {
				if (e.name) {
					this.switchTab(e.index);
				} else {
					let index = e.target?.current || e.detail?.current
					this.switchTab(index);

				}

			},
			switchTab(index) {
				if (this.subTabIndex === index) return;
				this.subTabIndex = index;
			},
		}
	}
</script>

<style lang="scss">
	view {
		box-sizing: border-box;
	}

	.swiper {
		height: 100%;
	}

	.indextabs {
		background-color: white;
		position: fixed;
		z-index: 1000;
		width: 100vw;
		display: flex;
		padding-top: 70rpx;
	}

	.subTabsPage {
		flex: 1;
		background-color: white;
	}

	.navPage {
		height: calc(100vh - 190rpx);
		display: flex;
		flex-direction: column;
	}

	.indexbody {
		width: 100vw;
		background-color: #FFF;
		height: 100vh;
		transition: transform 0.5s;
		padding-top: 190rpx;
	}
</style>